<template>
	<div class="index">
		<div class="index-banner">
      <img class="img" :src="banbg" alt="">
      <div class="swiper-container12">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in banner">
              <img v-bind:src="comimgsrc+item.img" alt="">
            </div>
        </div>
      </div>
    </div>
    <div class="notice">
      <div class="left"><i class="icon iconfont icon-gonggao"></i><p>通知公告</p></div>
      <div class="right">
        <div class="swiper-container4">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in notice">
                {{item.content}}
              </div>
          </div>
        </div>
      </div>
    </div>
    <img class="com-title-img" :src="bt1" alt="">
    <div class="limitbox">
      <div class="list" v-for="(item,index) in xsglist" @click="godetail(item.id)">
        <div class="djs">
          <djs @ievent="ievent($event)" v-bind:endtime="{sj:item.deadline,starttime:item.start_time,id:index,stock:item.stock}"></djs>
        </div>
        <img alt="" :src="comimgsrc+item.preview">
        <div class="down">
          <p class="name">{{item.name}}</p>
          <p class="price">{{item.price}}<span>/{{item.unit}}</span></p>
          <del class="m_price">原价:{{item.max_price}}<span>/{{item.unit}}</span></del>
        </div>
      </div>
    </div>
    <img class="com-title-img" :src="bt2" alt="">
    <div class="limitbox freshbox">
      <div class="list item" v-for="item in xghlist" @click="freshto(item.id)">
        <img alt="" :src="comimgsrc+item.preview">
        <div class="down">
          <p class="name">{{item.name}}</p>
          <p class="price">{{item.price}}<span>/{{item.unit}}</span></p>
        </div>
      </div>
    </div>
    <router-link class="more" to="/fresh">查看更多</router-link>
    <!-- <router-link v-show="zhongjian" :to="{name:'freshDetail', query:{cpid: zhongjian.goods_id}}">
      <img class="gg" :src="comimgsrc+zhongjian.img" alt="">
    </router-link> -->
    <img class="com-title-img" :src="bt3" alt="">
    <div class="limitbox freshbox">
      <div class="list item" v-for="item in tclist" @click="golimitdetail(item.id)">
        <img alt="" :src="comimgsrc+item.preview">
        <div class="down">
          <p class="name">{{item.name}}</p>
          <p class="price">{{item.price}}<span>/{{item.unit}}</span></p>
        </div>
      </div>
    </div>
    <router-link class="more" to="/specialty">查看更多</router-link>
    <comFooter v-bind:footerindex="1"></comFooter>
	</div>
</template>
<script>
import comFooter from '@/components/common/comfooter'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import gg1 from '@/assets/image/gg1.jpg';
import banbg from '@/assets/image/bg-ksh.png';
import bt1 from '@/assets/image/bt1.png';
import bt2 from '@/assets/image/bt2.png';
import bt3 from '@/assets/image/bt3.png';
import djs from '@/components/common/djs';
import qs from 'qs';

export default {
	name: 'index',
  	data () {
  		return{
        banbg,bt1,bt2,bt3,gg1,
        banner:[],
        xsglist:[],
        xghlist:[],
        tclist:[],
        zhongjian:{},
        comimgsrc:'http://api.mountainfreshes.com',
        notice:[
          {title:'公告1111111111'},
          {title:'公告2222222222'}
        ]
  		}
  	},
  	methods:{
      getmiddle:function(){
        
        this.$http.get("/index.php/index/index/bannerMiddle")
        .then(res => {
          
          this.zhongjian = res.data.rows
          console.log(this.zhongjian)
        })
        .catch(error => {
          
        });
      },
      getnotice:function(){
        this.$http.get("/index.php/index/index/noticeList")
        .then(res => {
          console.log(res)
          this.notice = res.data.rows;
          console.log(this.notice)
        })
        .catch(error => {
          
        });
      },
      getimglist:function(){
        this.$http.get("/index.php/index/index/bannerTop")
        .then(res => {
          this.banner = res.data.rows;
          console.log(this.banner)
        })
        .catch(error => {
          
        });
      },
      ievent(ev){
        this.sssid = ev.did;
        this.xsglist[ev.did].time = 0;
      },
      getlimit:function(){
        this.$http.get("/index.php/index/index/getTimeLimit")
        .then(res => {
          // console.log(res)
          this.xsglist = res.data;
          console.log(this.xsglist)
        })
        .catch(error => {
          
        });
      },
      getfresh:function(){
        this.$http.get("/index.php/index/index/getFreshFruit")
        .then(res => {
          // console.log(res)
          this.xghlist = res.data;
          console.log(this.xghlist)
        })
        .catch(error => {
          
        });
      },
      gettc:function(){
        this.$http.get("/index.php/index/index/getCharacteristic")
        .then(res => {
          // console.log(res)
          this.tclist = res.data;
          console.log(this.tclist)
        })
        .catch(error => {
          
        });
      },
      freshto:function(id){
        this.$router.push({ name: 'freshDetail', query:{cpid: id} })
      },
      golimitdetail:function(id){
        this.$router.push({ name: 'specialtyDetail', query:{cpid: id} })
      },
      godetail:function(id){
        this.$router.push({ name: 'limitDetail', query:{cpid: id} })
      }
  	},
  	components:{
      djs,comFooter
  	},
  	mounted(){
      var swiper12 = new Swiper('.swiper-container12', {
        paginationClickable: true,
        autoplay: 5000,
        speed:600,
        spaceBetween: 30,
        effect: 'fade',
        loop: true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true//修改swiper的父元素时，自动初始化swiper
      });
      var swiper4 = new Swiper('.swiper-container4', {
        paginationClickable: true,
        autoplay: 5000,
        direction: 'vertical',
        speed:600,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true//修改swiper的父元素时，自动初始化swiper
      });
      
    },
    created(){
      this.getlimit();
      this.getfresh();
      this.gettc();
      this.getimglist();
      this.getnotice();
      this.getmiddle();
    }
}
</script>
<style scoped lang="less">
.notice{
  padding: 0 .2rem;
  height: .5rem;
  margin-top: .1rem;
  .left{
    float: left;
    width: 1.4rem;
    height: 100%;
    text-align: left;
    i{
      font-size: .28rem;
      color: #d40000;
      line-height: .5rem;
      display: block;
      float: left;
    }
    p{
      font-size: .22rem;
      color: #d40000;
      line-height: .5rem;
      float: left;
      font-weight: bold;
      margin-left: .06rem;
    }
  }
  .right{
    width: 4.5rem;
    float: right;
    height: 100%;
    .swiper-container4{
      width: 100%;
      height: 100%;
      overflow: hidden;
      .swiper-slide{
        font-size: .22rem;
        text-align: left;
        line-height: .5rem;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.gg{
  display: block;
  width: 100%;
}
.more{
  display: block;
  width: 2rem;
  height: .56rem;
  background: #3fa33a;
  text-align: center;
  line-height: .56rem;
  color: #fff;
  font-size: .24rem;
  margin: .5rem auto .3rem;
}
.com-title-img{
  display: block;
  width: 3.18rem;
  margin: .32rem auto 0;

}
.index-banner{
  width: 100%;
  height: 3.2rem;
  position: relative;
  overflow: hidden;
  .img{
    display: block;
    position: absolute;
    z-index:111;
    left: 0;
    bottom: 0;
    width: 100%; 
    height: auto;
  }
  .swiper-container12{
    width: 100%;
    height: 100%;
    overflow: hidden;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
.limitbox{
  width: 6rem;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin: auto;
  margin-top: .14rem;
  .list{
    width: 2.9rem;
    height: 3.7rem;
    float: left;
    margin-top: .2rem;
    position: relative;
    .djs{
      width: 100%;
      height: .7rem;
      background: rgba(0,0,0,.6);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
    }
    &:nth-child(2n){
      margin-left: .2rem;
    }
    img{
      display: block;
      width: 2.9rem;
      height: 2.36rem;
    }
    .down{
      padding: 0 .1rem;
      height: 1.34rem;
      background: #eeeeee;
      .name{
        font-size: .24rem;
        color: #2a2a2a;
        text-align: center;
        padding-top: .12rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price{
        font-size: .36rem;
        color: #cf4040;
        text-align: center;
        span{
          font-size: .2rem;
          color: #383838;
        }
      }
      .m_price{
        color: #242424;
        font-size: .2rem;
      }
    }
  }
  .item{
    height: 3.32rem;
    box-sizing: border-box;
    border: .01rem solid #d0d0d0;
    padding: .01rem;
    img{
      display: block;
      width: 100%;
      height: 2.38rem;
    }
    .down{
      background: #fff;
      height: .82rem;
      padding: 0 .1rem;
      border-top: 1px solid #d0d0d0;

      .name{
        font-size: .24rem;
        text-align: left;
      }
      .price{
        font-size: .22rem;
        color: #434343;
        text-align: left;
        padding-top: .08rem;
      }
    }
  }
}
.freshbox{
  height: 7.06rem;
  overflow: hidden;
}
</style>